<template>
	<view>
		<view class="address-window" :class="address==true?'on':''">
			<view class='title'>分享至 <view class="iconfont"><u-icon name="close" color="#888" size="20"
						@click='close'></u-icon></view>
			</view>
			<view class='list flex-all'>
				<view v-if="zhuye" class="imgwrap"
					@click="toJump('/pages/hall/privateLetter?article='+JSON.stringify(article))">
					<image src="/static/imgs/fx1.png" mode="widthFix" />
					<view>私信好友</view>
				</view>
				<view class="imgwrap">
					<image src="/static/imgs/fx2.png" mode="widthFix" @click="weiFriend()" />
					<view>微信好友</view>
				</view>
				<view class="imgwrap">
					<image src="/static/imgs/fx3.png" mode="widthFix" @click="weiFriend('WXSenceTimeline')" />
					<view>朋友圈</view>
				</view>
				<view class="imgwrap">
					<image src="/static/imgs/fx4.png" mode="widthFix" @click="shareImgs()" />
					<view>生成分享图</view>
				</view>
				<view class="imgwrap">
					<image src="/static/imgs/fx5.png" mode="widthFix" @click="weiFriend('qq','WXSenceTimeline')" />
					<view>QQ分享</view>
				</view>
			</view>

			<view class='list flex-all' style="justify-content: flex-start;borderTop:1px solid #eee;" v-if="show">
				<view class="imgwrap">
					<image src="/static/imgs/bj1.png" mode="widthFix" />
					<view>编辑</view>
				</view>
				<view class="imgwrap">
					<image src="/static/imgs/bj2.png" mode="widthFix" />
					<view>时间锁</view>
				</view>
				<view class="imgwrap">
					<image src="/static/imgs/bj3.png" mode="widthFix" />
					<view>移动</view>
				</view>
			</view>
		</view>
		<view class='mask' catchtouchmove="true" :hidden='address==false' @click='close'></view>
		<u-popup :show="showImg" mode="center" @close="close" >
			<view>
				<image :src="IMG_URL+shareImg" mode="widthFix" @longtap="toSave"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		IMG_URL,
	} from "../../config/app.js";
	import {
		shareImg
	} from '../../api/my.js'
	export default {
		props: {
			address: {
				type: Boolean,
				default: false,
			},
			show: {
				type: Boolean,
				default: false,
			},
			zhuye: {
				type: Boolean,
				default: true,
			},
			article: Object
		},
		data() {
			return {
				shareImg: '',
				showImg: false,
				IMG_URL: IMG_URL,
			};
		},
		created() {
			console.log(this.article);
		},
		methods: {
			save() {
				console.log(this.shareImg);
				let that = this
				// #ifdef APP-PLUS
				uni.downloadFile({ //获得二维码的临时地址
					url: IMG_URL+that.shareImg,
					success: (res) => {
						console.log('获取url',res)
						if (res.statusCode == 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, //传入临时地址
								success() {
									uni.showToast({
										'duration': 1500,
										'title': '保存成功',
										'icon': 'success'
									})
								},
								fail() {
									uni.showToast({
										'duration': 1500,
										'title': '保存失败',
										'icon': 'error'
									})
								}
							})
						}
					}
				})
				// #endif
			},
			toSave() {
				uni.showModal({
					title: '图片保存',
					content: '确定要保存图片吗',
					success: e => {
						if (e['confirm']) {
							this.save();
						}
					}
				});
			},
			close() {
				this.showImg = false
			},
			shareImgs() {
				this.showImg = true
				this.getshareImg()
			},
			close: function() {
				this.$emit('changeClose');
			},
			toJump(url) {
				if (!url) return
				uni.navigateTo({
					url
				});
			},
			async getshareImg() {
				const res = await shareImg().then(res => {
					console.log(res, '获取分享图');
					this.shareImg = res.data
				});
			},
			weiFriend(provider = 'weixin', scene = '') {
				let title = ''
				let type = 0
				let summary = ''
				if (!this.zhuye) {
					title = '快来看这款app'
					type = 0
				} else {
					title = '快来看这篇文章'
					type = 0
					summary = this.article.introduce
				}
				uni.share({
					provider: provider, // 平台
					scene: provider,
					type: type, // 分享类型，0为图文，1为纯文字，2为纯图片，3为音乐，4为视频，5为小程序，默认为0
					title: title,
					summary: summary,
					href: '分享链接',
					imageUrl: this.article ? this.article.video_cover : '',
					success: function() {
						uni.showToast({
							'duration': 1500,
							'title': '分享成功',
							'icon': 'none'
						})
					},
					fail: function(err) {
						uni.showToast({
							'duration': 1500,
							'title': '分享失败',
							'icon': 'none'
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.address-window {
		background-color: #f6f6f6;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 101;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		border-radius: 30rpx 30rpx 0 0;
	}

	.address-window.on {
		transform: translate3d(0, 0, 0);
	}

	.address-window .title {
		font-size: 28rpx;
		text-align: center;
		height: 100rpx;
		color: $uni-text-color-placeholder;
		line-height: 100rpx;
		position: relative;
	}

	.address-window .title .iconfont {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translate(0, -50%);
	}

	.address-window .list {
		padding: 50rpx 0;
	}

	.address-window .list .imgwrap {
		width: 20%;
		text-align: center;
	}

	.address-window .list .imgwrap image {
		width: 90rpx;
	}

	.address-window .list .imgwrap view {
		font-size: 24rpx;
		color: $uni-text-color;
		margin-top: 20rpx;
	}
</style>